<template>
  <!-- 分页 -->
  <div class="pagination">
    <div class="pageLines"></div>
    <el-pagination class="pageBody"
        background
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        :layout="layout"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Pagination',
  props: {
    pageSize: [Number, String], // 一页多少条
    currentPage: [Number, String], // 当前页
    total: [Number, String], // 总页数
    options: [Object], // 分页发生变化赋值给options
    render: [Function], // 跳转触发的请求
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    }
  },
  setup (props, context) {
    // 分页导航
    const handlePageChange = (val) => {
      // eslint-disable-next-line vue/no-mutating-props
      props.options.page = val
      props.render()
    }
    // 切换分页条数
    const handleSizeChange = (val) => {
      // eslint-disable-next-line vue/no-mutating-props
      props.options.limit = val
      props.render()
    }
    return {
      handlePageChange,
      handleSizeChange
    }
  }
}

</script>

<style lang="less">
@import "pagination.less";
</style>
